<template>
  <div id="admin">
    <!--search box-->
    <div style="margin: 20px">
      <el-input style="width: 240px" placeholder="Name..." v-model="params.name"></el-input>
      <el-input style="width:240px; margin-left: 2px;" placeholder="Phone..." v-model="params.phone"></el-input>
      <el-input style="width:240px; margin-left: 2px;" placeholder="Email..." v-model="params.email"></el-input>
      <el-button type="primary" style="margin-left: 2px" @click="load">
        <i class="el-icon-search"></i>检索
      </el-button>
      <el-button type="info" style="margin-left: 2px" @click="reset">
        <i class="el-icon-refresh"></i>重置
      </el-button>
    </div>
    <!--    table-->
    <div style="margin-left: 10px">
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="admincode" label="卡号" width="150"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="phone" label="电话号码" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="120"></el-table-column>
        <el-table-column prop="updatetime" label="更新时间" width="120"></el-table-column>

        <el-table-column label="操作">
          <template v-slot="scope">
<!--            scope获取该行的数据-->
            <el-button type="primary" size="mini" plain
                       @click="edit(scope.row.id)">编辑
            </el-button>

            <el-popconfirm
                title="这一段内容确定删除吗？"
                @confirm="del(scope.row.id)"
                style="margin-left: 5px"
            >
              <el-button slot="reference" type="danger" size="mini" plain>删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
    </div>

    <div style="margin-top: 20px">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total" :page-size="params.pageSize" :current-page="params.pageNum"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'Admin',
  data() {
    return {
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        name: '',
        phone: '',
        email: ''
      }
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {

      request.get('/admin/page', {
        params: this.params
      }).then(res => {
        console.log(res)
        if (res.code === '200') {
          this.tableData = res.data.list
          this.total = res.data.total

        }
      })
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        phone: '',
        email: ''
      }
      this.load()
    },
    handleCurrentChange(pageNum) { // 触发分页
      this.params.pageNum = pageNum
      this.load()
    },
    del(id){
      request.delete("/admin/delete/" + id).then(res => {
        if (res.code === '200'){
          this.$notify.success("删除成功")
          this.load()
        } else {
          this.$notify.error(res.msg)
        }

      })

    },
    edit(id){
      request.get("/admin/isLegal").then(res => {
        if (res.code == '200') {
          this.$router.push('/editAdmin?id=' + id)
        }
        else {
          this.$notify.error(res.msg)
          return null
        }

      })
    }
  }
}
</script>

<style scoped>

</style>